<template>
  <u-button class="defaultStyle" :class="[type]" :custom-style="customStyle" :ripple="true" hover-class="none"
    :shape="shape" @click="onClick">
    <slot></slot>
  </u-button>
</template>

<script>
export default {
  name: "BaseButton",
  props: {
    width: {
      type: String | Number, //按钮宽度
      default: "auto",
    },
    type: {
      type: String, //按钮类型primary default
      default: "primary",
    },
    shape: {
      type: String, //按钮圆角 circle square
      default: "square",
    },
  },
  data() {
    return {
      customStyle: {
        width: this.width == "auto" ? this.width : this.width + "rpx",
      },
    };
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
  options: { styleIsolation: "shared" }, //组件必须加,才能修改内部样式
};
</script>

<style lang="scss" scoped>
// .defaultStyle {
//  ::v-deep button {
//     height: 88rpx;
//     font-size: $font-size-xlarge;
//     &::after {
//       border: none;
//     }
//   }
// }
// .primary {
//  ::v-deep button {
//     color: $textWhite;
//     background: linear-gradient(268deg, #206bc5 0%, #0eade2 99%);
//   }
// }
// .default {
//  ::v-deep button {
//     color: $textBlack;
//     background: $uni-bg-color;
//     border: 2rpx solid #c8c8c8;
//   }
// }
// .theme {
//  ::v-deep button {
//     color: $textWhite;
//     background: $themeComColor;
//     font-size: $font-size-middle;
//     height: 78rpx;
//   }
// }

.defaultStyle {
  ::v-deep .u-btn {
    height: 88rpx;
    font-size: $font-size-xlarge;

    &::after {
      border: none;
    }
  }
}

.primary {
  ::v-deep .u-btn {
    color: $textWhite;
    background: linear-gradient(268deg, #206bc5 0%, #0eade2 99%);
  }
}
.eixt {
  ::v-deep .u-btn {
    color: $textWhite;
    background: linear-gradient(268deg, #ff2919 0%,  #ff5223 99%);
  }
}
.default {
  ::v-deep .u-btn {
    color: $textBlack;
    background: $uni-bg-color;
    border: 2rpx solid #c8c8c8;
  }
}

.theme {
  ::v-deep .u-btn {
    color: $textWhite;
    background: $themeComColor;
    font-size: $font-size-middle;
    height: 78rpx;
  }
}
</style>